<template>
    <header style="border: groove; border-width: 2px; height: 500px; width: 100%; margin-top: 100px;">
        <div
            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; background-color: #f5f7fa; padding: 10px; border: 1px solid #e4e7ed; border-radius: 4px;">
            <span>二级科室列表</span>
            <el-button type="primary" @click="set">返回</el-button>
        </div>
        <el-table :data="Departdata" border style="width: 100%; margin-top: 30px;">
            <el-table-column type="selection" align="center" />
            <el-table-column prop="name" label="科室名称" width="130" align="center" />
            <el-table-column prop="css" label="级别" width="80" align="center">
                <template #default="scope">
                    {{ scope.row.css == 1 ? '一级' : '二级' }}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80" align="center">
                <template v-slot="scope">
                    <span v-if="scope.row.status == 1">显示</span>
                    <span v-else>隐藏</span>
                </template>
            </el-table-column>
            <el-table-column prop="intro" label="备注" width="180" align="center" />
            <el-table-column prop="createName" label="上传人" width="80" align="center" />
            <el-table-column prop="createTime" label="添加时间" width="180" align="center">
                <template #default="scope">
                    {{ scope.row.createTime.substring(0, 19).replace('T', ' ') }}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="390" align="center">
                <template #default="scope">
                    <el-button size="mini" @click="sebu(scope.row)">编辑</el-button>
                    <el-button size="mini" @click="open(scope.row.deptSubCategoryId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 30px;">
            <el-pagination v-model:current-page="page.Pagindex" v-model:page-size="page.Pagsize"
                :page-sizes="[3, 5, 10]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="page.totalcount" />
        </div>
    </header>
    <el-dialog v-model="setting.isOpen" :title="setting.istite" width="500" align-center draggable>
        <el-form>
            <el-form-item label="科室名称">
                <el-input v-model="deparrtmentdata.name" placeholder="请输入……" />
            </el-form-item>
            <el-form-item label="上级分类">
                <el-select v-model="deparrtmentdata.departmentId" placeholder="请选择">
                    <el-option v-for="a in selects" :label="a.name" :value="a.departmentId" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="deparrtmentdata.intro" type="textarea" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="deparrtmentdata.status">
                    <el-radio :value="1">是</el-radio>
                    <el-radio :value="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="setting.isOpen = false">取消</el-button>
                <el-button type="primary" @click="deparrtmentadd">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { Filter, RefreshRight } from '@element-plus/icons-vue'
import { Read, Write } from '@/Http/Axios'
import { ElMessage, ElMessageBox, type UploadProps } from 'element-plus'

import { useCounterStore } from '@/stores/counter'
import router from '@/router'
import { useRoute } from 'vue-router'
const store = useCounterStore()
const route = useRoute()

const page = reactive({
    Pagindex: 1,
    Pagsize: 10,
    totalcount: 0,
    totalpage: 1,
})

const Departdata = ref([
    {
        "deptSubCategoryId": 0,
        "hospitalId": 0,
        "css": 0,
        "name": "",
        "intro": "",
        "status": 0,
        "createTime": "2025-10-30T11:47:26.218Z",
        "isDeleted": true,
        "createName": ""
    }
])

const departlist = () => {
    Read.get("/DeptSubCategoryShow", {
        params: {
            Pagindex: page.Pagindex,
            Pagsize: page.Pagsize,
            DepartmentId: route.query.id
        }
    }).then(res => {
        Departdata.value = res.data.data.fdata
        page.totalcount = res.data.data.totalCount
        page.totalpage = res.data.data.totalPage
    })
}


//下拉框
const selects = ref([
    {
        "departmentId": 3,
        "name": "",
        "deptSubCategoryId": 0,
        "name2": ""
    }
])
const selectlist = () => {
    Read.get("/SelectShow").then(res => {
        selects.value = res.data.data
    })
}

//新增科室
const deparrtmentdata = reactive({
    "deptSubCategoryId": 0,
    "departmentId": 0,
    "name": "string",
    "intro": "string",
    "status": 0
})

const setting = reactive({
    isOpen: false,
    istite: "新增轮播图",
    isEdit: false,
})
const sebu = (t: any) => {
    setting.isOpen = true
    if (t == null) {
        deparrtmentdata.name = ""
        deparrtmentdata.intro = ""
        deparrtmentdata.status = 1
        setting.istite = "新增科室"
        setting.isEdit = false

    }
    else {
        deparrtmentdata.name = t.name
        deparrtmentdata.intro = t.intro
        deparrtmentdata.status = t.status
        setting.istite = "编辑二级科室"
        setting.isEdit = true
        deparrtmentdata.deptSubCategoryId = t.deptSubCategoryId
        deparrtmentdata.departmentId = t.departmentId

    }
}
const deparrtmentadd = () => {
    if (setting.isEdit == false) {
        Write.post("/AddDepartment", deparrtmentdata).then(res => {
            if (res.data.code == 200) {
                ElMessage.success("科室添加成功")
                setting.isOpen = false
                departlist();
            }
        })
    }
    else if (setting.isEdit == true) {
        Write.put("/UpdateDeptSubCategory", deparrtmentdata).then(res => {
            if (res.data.code == 300) {
                ElMessage.success("科室修改成功")
                setting.isOpen = false
                departlist();
            }
        })
    }

}
//删除方法
const open = (t: any) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            Write.delete("/DeleteDeptSubCategory", {
                data: {
                    deptSubCategoryId: t
                }
            }).then(res => {
                if (res.data.code == 400) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    departlist();
                }

            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}
const set = () => {
    router.push({
        path: "/DepartmentOneView",
    })
}
//钩子函数
onMounted(() => {
    departlist();
    selectlist();
})
//侦听器
watch(page, () => {
    departlist();
})
</script>
